<template>
  <view class="x-modal" v-if="configs.visible">
    <view class="x-modal-body" :class="{ 'modal-center-enter': configs.visible }">
      <view class="x-modal-body-title" v-if="configs.title">
        {{ configs.title }}
      </view>
      <view
        class="x-modal-body-content"
        v-if="configs.content"
        :style="`text-align: ${configs.textAlign}`"
      >
        <scroll-view :scroll-y="true" class="fulled" style="max-height: 500rpx">
          <text class="contentText fulled">{{ configs.content }}</text>
        </scroll-view>
      </view>

      <view class="slotWrap">
        <slot></slot>
      </view>
      <view class="x-modal-body-button">
        <button
          :open-type="configs.cancelOpenType"
          class="x-modal-body-button-item cancel"
          @tap="cancel"
          :style="{ color: configs.cancelColor }"
          v-if="configs.showCancel && configs.cancelText"
        >
          {{ configs.cancelText }}
        </button>
        <button
          :open-type="configs.confirmOpenType"
          class="x-modal-body-button-item confirm"
          @tap="confirm"
          :style="{ color: configs.confirmColor }"
          v-if="configs.confirmText"
        >
          {{ configs.confirmText }}
        </button>
        <button
          :open-type="configs.confirmOpenType"
          class="x-modal-body-button-item confirm2"
          @tap="confirm2"
          :style="{ color: configs.confirmColor }"
          v-if="configs.confirmText2"
        >
          {{ configs.confirmText2 }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from "vue";
onMounted(() => {});
const state = reactive({
  configs: {
    visible: false,
    title: "提示",
    content: "",
    cancelText: "取消",
    confirmText: "确定",
    confirmText2: "",
    showCancel: true,
    confirmColor: "#ffffff",
    cancelColor: "#ffffff",
    textAlign: "center",
    confirmOpenType: "",
    cancelOpenType: "",
    success: (res: Modal.ICallbackMsg) => {},
    autoClose: true,
  },
});
const { configs } = toRefs(state);
function showModal(data: Modal.IConfigs) {
  state.configs = { ...state.configs, ...data };
  state.configs.visible = true;
}
function cancel() {
  state.configs.success({
    cancel: true,
    confirm: false,
    errMsg: "showModal:ok",
  });
  state.configs.visible = false;
}
function confirm() {
  state.configs.success({
    cancel: false,
    confirm: true,
    errMsg: "showModal:ok",
  });
  if (state.configs.autoClose) state.configs.visible = false;
}
function confirm2() {
  state.configs.success({
    cancel: false,
    confirm: false,
    confirm2: true,
    errMsg: "showModal:ok",
  });
  if (state.configs.autoClose) state.configs.visible = false;
}
defineExpose({ showModal, cancel });
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
